<template>
  <div class="chat-history" :class="{ 'chat-history-open': isOpen }">
    <button class="history-toggle" @click="toggleHistory">
      <svg viewBox="0 0 24 24" class="history-icon">
        <path fill="currentColor" d="M13.5 8H12v5l4.28 2.54.72-1.21-3.5-2.08V8M13 3a9 9 0 0 0-9 9H1l3.96 4.03L9 12H6a7 7 0 0 1 7-7a7 7 0 0 1 7 7a7 7 0 0 1-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.896 8.896 0 0 0 13 21a9 9 0 0 0 9-9a9 9 0 0 0-9-9"/>
      </svg>
      <span class="history-label">历史对话</span>
    </button>

    <div class="history-panel">
      <div class="history-header">
        <h3>历史对话</h3>
        <button class="close-button" @click="toggleHistory">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"/>
          </svg>
        </button>
      </div>

      <div class="history-list">
        <div v-if="!dialogues.length" class="empty-history">
          暂无历史对话
        </div>
        <div v-else v-for="(dialogue, index) in dialogues" 
             :key="index" 
             class="history-item"
             @click="loadDialogue(dialogue)">
          <div class="dialogue-info">
            <div class="dialogue-title">
              {{ dialogue.title || formatFirstMessage(dialogue.messages[0]?.content) }}
            </div>
            <div class="dialogue-meta">
              <span class="dialogue-time">{{ formatTime(dialogue.startTime) }}</span>
              <span class="dialogue-count">{{ dialogue.messages.length }}条消息</span>
            </div>
          </div>
          <button class="delete-button" @click.stop="deleteDialogue(index)">
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  dialogues: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['load', 'delete'])

const isOpen = ref(false)

const toggleHistory = () => {
  isOpen.value = !isOpen.value
}

const formatFirstMessage = (content) => {
  if (!content) return '新对话'
  return content.slice(0, 30) + (content.length > 30 ? '...' : '')
}

const formatTime = (timestamp) => {
  if (!timestamp) return ''
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    month: 'numeric',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const loadDialogue = (dialogue) => {
  emit('load', dialogue)
  isOpen.value = false
}

const deleteDialogue = (index) => {
  emit('delete', index)
}
</script>

<style scoped>
.chat-history {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  z-index: 1000;
  display: flex;
  pointer-events: none;
}

.chat-history-open {
  pointer-events: auto;
}

.history-toggle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 8px 12px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-right: none;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  transition: all 0.3s ease;
}

.history-toggle:hover {
  background-color: #f8fafc;
  transform: translateY(-50%) translateX(-2px);
}

.history-icon {
  width: 20px;
  height: 20px;
  color: #64748b;
}

.history-label {
  font-size: 14px;
  color: #64748b;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.history-panel {
  width: 320px;
  height: 100%;
  background-color: #ffffff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.chat-history-open .history-panel {
  transform: translateX(0);
}

.history-header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-header h3 {
  margin: 0;
  font-size: 16px;
  color: #1f2937;
}

.close-button {
  padding: 4px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.close-button:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.empty-history {
  text-align: center;
  color: #94a3b8;
  padding: 32px 16px;
}

.history-item {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

.history-item:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.dialogue-info {
  flex: 1;
  min-width: 0;
}

.dialogue-title {
  font-size: 14px;
  color: #1f2937;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialogue-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}

.delete-button {
  padding: 4px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.2s;
}

.history-item:hover .delete-button {
  opacity: 1;
}

.delete-button:hover {
  background-color: #fee2e2;
  color: #ef4444;
}

@media (prefers-color-scheme: dark) {
  .history-toggle,
  .history-panel {
    background-color: #1a1a1a;
    border-color: #404040;
  }

  .history-toggle:hover {
    background-color: #2d2d2d;
  }

  .history-header {
    border-bottom-color: #404040;
  }

  .history-header h3 {
    color: #e5e7eb;
  }

  .history-item {
    border-color: #404040;
    background-color: #2d2d2d;
  }

  .history-item:hover {
    background-color: #374151;
    border-color: #4b5563;
  }

  .dialogue-title {
    color: #e5e7eb;
  }

  .empty-history {
    color: #6b7280;
  }

  .close-button:hover {
    background-color: #374151;
    color: #e5e7eb;
  }

  .delete-button:hover {
    background-color: #7f1d1d;
    color: #fca5a5;
  }
}
</style> 